<template>
	<view>
		<scroll-view class="scroll" scroll-y="true" :scroll-top="scroll" @scrolltoupper="upper" @scrolltolower="lower"
:style="{height:scrollH+'rpx'}">
	<image class="img1" src="../../static/早餐.jpg"></image>
	
	<view class="allmain">
		<text class="text1">温情早餐</text>
	
	<view class="time">
	<text class="text2">时间</text>
	<text class="text21">7:30至9：30开放</text>
	<image class="time2" src="../../static/time.png"></image>
	</view>
	<view class="location">
	<text class="text3">位置</text>
	<text class="text31">美食区11F</text>
	<image class="location2" src="../../static/location.png"></image>
	</view>
	</view>
	<view class="introduction">
		<text class="main">活动介绍</text>
		<text class="main1">欢迎您来到主题乐园，参加温情早餐活动。主题乐园拥有1832m²大型室内游玩场所。
主题咖乐园融参与性、观赏性、娱乐性、趣味性于一体，绝对的网红打卡圣地，致力打造成为中国最新、最具个性魅力的主题乐园，是主题咖度假区的重要组成部分。它根据天然优美的海岸线，自然天成的山水，巧妙地将多种精彩刺激的高科技游乐设备与地中海风格建筑和融合，形成了热情奔放的幸运大道区、惊险刺激的冒险丛林区、神秘诡异的海盗城堡区、梦幻童话的美人鱼湖区、激情四溢的神秘岛区和碧海银滩的加勒比海岸区等六大主题区域，多种高科技游乐项目，带你飞跃翻腾。
主题咖拥有亚洲第一的“E型战车”；中国第一座”疯狂逃生船”、“云霄飞车”、“垂直极限”等高科技的大型游乐设施。配合多项中小型乐项目和近10种充满异国风情的表演，让游客在互动中享受刺激与欢乐。
</text>
</view>

</scroll-view>
<view class="guanzhu">
<text class="text4">关注活动</text>
<view class="position">
	<img :src="isActive===true?'../../static/QQ图片20221218005258.png':'../../static/QQ图片20221218005314.png'" @click="go">
</view>
</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive:false
			}
		},
		methods: {
			go(){ //收藏
			      var that=this;
			      if(that.isActive === false){
					//axios请求
			        that.isActive = true
			        
			      }else if(that.isActive === true){
					//axios请求
			        that.isActive = false
			       
			 }
			 },
		}
	}
</script>

<style>
.img1{
	width:371px;
	height:260px;
	
}
.text1{
	position: absolute;
	top: 280px;
	left: 130px;
	font-size: 30px;
	font-weight: 600;
}
.text2{
	position: absolute;
	top: 330px;
	left: 50px;
	font-size: 20px;
	
}
.text21{
	position: absolute;
	top: 335px;
	right: 20px;
	font-size: 15px;
	
}
.time2{
	position: absolute;
	top: 330px;
	left: 20px;
	width: 4%;
	height: 4%;
}
.location2{
	position: absolute;
	top: 360px;
	left: 20px;
	width: 4%;
	height: 4%;
}
.text3{
	position: absolute;
	top: 360px;
	left: 50px;
	font-size: 20px;
	
}
.text31{
	position: absolute;
	top: 365px;
	right: 65px;
	font-size: 15px;
	
}
.main{
	font-size: 25px;
	position: absolute;
	top:400px;
	left: 15px;
}
.main1{
	font-size: 15px;
	position: absolute;
	top:430px;
	left: 15px;
}
.text4{
	position: absolute;
	font-size: 23px;
	right: 30px;
	bottom: 0px;
	color: aliceblue;
	
}
.scroll{
	height: 590px;
}
.position{
	position: absolute;
	
	left: 30px;
	bottom: 0px;
}
.guanzhu{
	border: 2px solid seagreen;
	height: 30px;
	width: 180px;
	position: absolute;
	left: 100px;
	border-radius: 20px;
	background-color: coral;
	
	
	
}
.allmain{
	border: 1px solid darkslateblue;
	height: 500px;
	border-radius: 20px;
}
</style>
